<template>
  <div class="page-wrapper">
    <div class="content">
      <el-col :span="6" style="text-align: center;height: 50px">
        <span style="margin-top: 20px;font-size: 25px;font-family: 幼圆">{{this.tableData[0].taskName}}</span>
      </el-col>
      <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          border>
        <el-table-column prop="taskNum" label="作业号"></el-table-column>
        <el-table-column prop="taskName" label="作业名"></el-table-column>
        <el-table-column prop="studentNum" label="学生学号"></el-table-column>
        <el-table-column prop="studentName" label="姓名"></el-table-column>
        <el-table-column prop="score" label="分数"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="success" @click="correct(scope.row)">批改作业</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class=""
          background
          layout="prev, pager, next"
          :total="this.total"
          :page-size="this.page.pageSize">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import axios from "axios";

export default {
  name:'EnterHomework',
  props: {
    TaskNum: ''
  },
  created() {
    this.page.query = this.TaskNum;
    console.log(this.page);
    axios.post('/api/task/GetTaskDetail',this.page).then(res=>{
      console.log(res);
      this.total = res.data.data.total
      this.tableData = res.data.data.list
    }).catch(error=>{
      console.log(error);
    })
  },
  components:{

  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    correct(scope){
      this.$router.push({name:'ViewTest',params:{studentNum:scope.studentNum,TaskNum:scope.taskNum}});
    }
  },
  data() {
    return {
      tableData: [],
      page:{pageSize:10,pageNum:1},
      total:undefined
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-table-column{
  width: 10%;
}

.el-pagination{
  text-align:center;
  margin-top:50px;
  margin-left: 35%;
}
</style>